/**
 * Created by renzhiqiang on 17/4/23.
 */
import { Layout, Menu, Breadcrumb, Icon} from 'antd';
import {Link} from 'dva/router';
import request from './../../services/home/home';
import style from './home.less';
import Headers from './header';

const { SubMenu } = Menu;

const { Header, Content, Sider, Footer} = Layout;
import { connect } from 'dva';

function setItem(data, openfolder) {
   return data.map(function (value, index) {
     var path = '/'
     if (!!value.children){
       return (
         <SubMenu key={'sub' + index } className={!openfolder ? style.mgtfolder : style.mgt} title={<span><Icon type="exception"  className={openfolder ? style.openfolder: style.ft}/>{ openfolder ? "" : value.name}</span>}>
           {value.children.map(function (val,idx) {
             return (
               <Menu.Item key={idx}><Link to={ path + val.key}>{val.name}</Link></Menu.Item>
             )
           })}
         </SubMenu>
     )
     } else {
       return (
         <Menu.Item key={'sub' + index }><Link to={ path + value.key}><Icon type="exception" className={openfolder ? style.openfolder: style.ft} />{ openfolder ? "" : value.name}</Link></Menu.Item>)
     }
   });
};

class home extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      current:'sub0'
    };
  };
  componentDidMount(){
  }
  handleClick = (e) => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  };

  render(){
    var dispatch = this.props.dispatch;
    var children = this.props.children;
    const {list, page, total, isShow} = this.props.data;
    const itemList = setItem(list || [], isShow);
    const headerConfig = {
      dispatch
    };
    return(
      <div>
        <Layout className={style.maxHeight}>
          <Sider width={200} style={{ background: '#fff' }} collapsedWidth="60" trigger={null} collapsed = {isShow}>
            <div className={!isShow ? style.logoBig : style.logoSmall} />
            <Menu
              className={style.ulscc}
              theme="Dark"
              mode= {isShow ? "vertical":"inline"}
              selectedKeys={[this.state.current]}
              style={{ height: '100%' }}
            >
              {itemList}
            </Menu>
          </Sider>
        <Layout>
        <Headers {...headerConfig}></Headers>
        <Content style={{ background: '#EEEEEE', margin: 0, minHeight: 280 }}>
           {children}
          </Content>
            <Footer style={{ textAlign: 'center' }}>
              Ant Design ©2016 Created by Ant UED
            </Footer>
          </Layout>
        </Layout>
      </div>
    )
  }
}
function state(state) {
  var data = state.home;
  return {
     data: data
  }
}
export default connect(state)(home)
